<template>
  <div>
    <!-- <svg style="width:30px;height:30px;"> -->
    <!-- <svg :style="{width:width,height:height}"> -->
    <svg :style="{width,height}">
      <!-- 注：1.属性“xlink:href”被用于“指定用哪一个图标”，属性值必须采用“#icon-图标文件名”这种格式（否则图标就不能用）；2.属性“fill”被用于“指定填充颜色（即设置图标的颜色）”↓ -->
      <!-- <use xlink:href="#icon-phone" fill="red"></use> -->
      <use :xlink:href="prefix+name" :fill="color"></use>
    </svg>
  </div>
</template>

<script lang="ts" setup name="svgIcon">
// 接收父组件传递的参数（包含图标的名称、颜色、大小等）↓
defineProps({
    // 图标名称（即属性“xlink:href”的“值”）中的前缀↓
    prefix:{
        type:String,
        default:'#icon-',
    },
    // 被使用到的图标的名称↓
    name:String,
    color:{
        type:String,
        default:''
    },
    // 图标的宽度↓
    width:{
        type:String,
        default:"16px"
    },
    // 图标的高度↓
    height:{
        type:String,
        default:"16px"
    }
        
})
</script>

<style scoped>

</style>